<template>
  <div class="w-full h-full bg-gradient-to-br from-[#9d5d9f] to-[#bb7bbb] select-none ">
    <div class="w-full h-[100px] flex pt-8 pl-12 ">
      <div>
        <p class="text-[28px] font-bold text-white ">我的一天</p>
        <p class="text-white text-[14px] mt-1"> {{time()}}</p>

      </div>
    </div>
    <div class="w-full h-[calc(100%-200px)] overflow-auto ">
      <div v-if="taskStore.task_list.length === 0" class=" w-[300px] h-[100px]  m-auto pt-[25%] text-white text-center">
        <p class="text-[20px] font-bold mb-2">专注于你的一天</p>
        <p class="text-[14px] ">使用“我的一天"完成任务，这是一个每<br>天都会刷新的列表。</p>
      </div>
      <div v-else class="w-[90%] h-full m-auto  justify-center items-center select-text   ">
        <VueDraggable>
          <div v-for="(item , index) in task_list " :key="index">
            <TaskCard :task="item" />
          </div>
        </VueDraggable>
      </div>
    </div>
    <div class="w-full h-[100px] flex justify-center items-center">
      <div class="w-[90%] h-[50%] bg-white opacity-75  hover:opacity-100  rounded-sm  ">
        <button class=" w-[5%] h-full text-[30px] font-light ">+</button>
        <input @keydown.enter="addTaskList()" v-model="task" class="w-[95%] h-full  rounded" type="text" placeholder="添加任务">
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { taskUseStore } from "@/stores/index";
import { VueDraggable } from "vue-draggable-plus";
import { computed, ref } from "vue";
import TaskCard from "@/components/TaskCard.vue";
import type { Task } from "@/types/task";

const taskStore = taskUseStore();
const task = ref("");

// const task_list = ref<Task[]>([]);

const task_list = computed(() => {
  return taskStore.task_list.slice().reverse();
});

function addTaskList() {
  if (task.value.trim() == "") {
    return;
  }
  taskStore.addTaskList(task.value);
  task.value = "";
}

// 时间格式化
function time(): string {
  let date = new Date();
  let month = date.getMonth();
  let day = date.getDate();
  return `${month + 1}月${day}日,星期${num_to_chinese(date.getDay())}`;
}

//数字转星期几的汉字写法
function num_to_chinese(num: number): string {
  let chinese = ["日", "一", "二", "三", "四", "五", "六"];
  return chinese[num];
}
</script>
